<template>
  <div class="capability-templates">
    <a-table
      :columns="columns"
      :data-source="templates"
      :loading="loading"
      row-key="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'type'">
          <a-tag :color="getTypeColor(record.type)">
            {{ getTypeLabel(record.type) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'category'">
          <a-tag :color="getCategoryColor(record.category)">
            {{ getCategoryLabel(record.category) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="primary" size="small" @click="useTemplate(record)">
              使用模板
            </a-button>
            <a-button size="small" @click="viewTemplate(record)">查看</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { message } from 'ant-design-vue';

const loading = ref(false);

const templates = ref([
  {
    id: '1',
    name: '预订工作流模板',
    description: '标准房间预订流程模板',
    type: 'workflow',
    category: 'booking',
    version: '1.0.0',
    author: 'HotelTech',
    tags: ['工作流', '预订', '酒店'],
  },
  {
    id: '2',
    name: '房间配置表单模板',
    description: '房间属性配置表单模板',
    type: 'form',
    category: 'room',
    version: '1.0.0',
    author: 'FormBuilder',
    tags: ['表单', '房间', '配置'],
  },
  {
    id: '3',
    name: '定价规则模板',
    description: '动态定价规则模板',
    type: 'rule',
    category: 'pricing',
    version: '1.0.0',
    author: 'PricingAI',
    tags: ['规则', '定价', '动态'],
  },
]);

const columns = [
  { title: '模板名称', dataIndex: 'name', key: 'name' },
  { title: '描述', dataIndex: 'description', key: 'description' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '分类', dataIndex: 'category', key: 'category' },
  { title: '版本', dataIndex: 'version', key: 'version' },
  { title: '作者', dataIndex: 'author', key: 'author' },
  { title: '操作', key: 'action' },
];

const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    workflow: 'blue',
    form: 'green',
    rule: 'purple',
    report: 'orange',
    api: 'cyan',
  };
  return colorMap[type] || 'default';
};

const getTypeLabel = (type: string) => {
  const labelMap: Record<string, string> = {
    workflow: '工作流',
    form: '表单',
    rule: '规则',
    report: '报表',
    api: 'API',
  };
  return labelMap[type] || type;
};

const getCategoryColor = (category: string) => {
  const colorMap: Record<string, string> = {
    booking: 'blue',
    room: 'green',
    pricing: 'purple',
    payment: 'orange',
    analytics: 'cyan',
  };
  return colorMap[category] || 'default';
};

const getCategoryLabel = (category: string) => {
  const labelMap: Record<string, string> = {
    booking: '预订',
    room: '房间',
    pricing: '定价',
    payment: '支付',
    analytics: '分析',
  };
  return labelMap[category] || category;
};

const useTemplate = (record: any) => {
  message.success(`使用模板成功: ${record.name}`);
};

const viewTemplate = (record: any) => {
  message.info(`查看模板: ${record.name}`);
};
</script>

<style lang="less" scoped>
.capability-templates {
  // 样式定义
}
</style>
